<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <div class="assets">
        <div class="n">{{ $t("page.doc5") }}(USDT)</div>
        <div class="am">{{ income_info.electronBalance }}</div>
      </div>

      <div class="record_hdrecord_hd db" style="justify-content: flex-end">
        <div class="flexs list_title">{{ $t("page.doc8") }}</div>
        <div class="set" @click="type_show = true">
          {{ typeTXT }}
        </div>
        <div class="set" @click="time_show = true">
          <span v-if="date == ''">{{ timeTXT }} </span>
          <span v-else>{{ date }}</span>
        </div>
      </div>

      <div class="empty db" v-show="emptyShow">
        <div class="flexs">
          <van-empty
            class="custom-image"
            :image="require('../../assets/images/Group12.png')"
            :description="$t('page1.doc45')"
          />
        </div>
      </div>

      <van-pull-refresh
        v-model="refreshing"
        :success-text="$t('load.refreshed')"
        @refresh="onRefresh(0)"
        head-height="100"
        v-if="!emptyShow"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('load.no_more')"
          :loading-text="$t('load.loading')"
          @load="onLoad"
          :immediate-check="check"
        >
          <div style="margin-top: 0.24rem; margin-bottom: 1rem">
            <ul class="list">
              <li v-for="(item, k) in datalist" :key="k">
                <div class="wrap bet">
                  <div class="name">
                    <div class="n">{{ item.type }}</div>
                    <div class="time">{{ item.date }}</div>
                  </div>
                  <div
                    :class="item.amount && item.amount >= 0 ? 's' : 'reduce'"
                  >
                    {{ common.decal4(item.amount) }} {{ item.coinName }}
                    <!-- <div class="status">
                    {{item.status}}
                  </div> -->
                  </div>
                </div>

                <div class="pp tar">
                  {{ item.rejectReason }}
                </div>
              </li>
            </ul>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>

    <van-popup v-model="type_show" round position="bottom">
      <van-picker
        :title="$t('page.doc9')"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        :confirm-button-text="$t('page.doc83')"
          :cancel-button-text="$t('page4.doc63')"
        item-height=".8rem"
      />
    </van-popup>

    <van-calendar
      v-model="time_show"
      color="#F4345D"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onTimeConfirm"
      style="color: #000"
    />

    <div class="footer_but">
      <div class="fo">
        <div class="item" @click="path_url('/wallet/recharge')">
          <img src="../../assets/images/Group27.png" alt="" />
          {{ $t("page1.doc48") }}
        </div>
        <div class="item" @click="path_url('/wallet/withdraw')">
          <img src="../../assets/images/Group28.png" alt="" />
          {{ $t("page1.doc49") }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      title: this.$t("title.doc27"),
      income_info: [],
      is_static: this.$store.state.is_assets,
      datalist: [],

      timeTXT: this.$t("page.doc10"),
      startTime: "",
      endTime: "",
      typeTXT: this.$route.query.name
        ? this.$route.query.name
        : this.$t("page.doc11"),
      type: this.$route.query.id ? [this.$route.query.id] : [],
      datatype: [],

      type_show: false,
      time_show: false,
      date: "",
      columns: [this.$t("page.doc11")],
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(),

      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: true,
      ktx: 0,
    };
  },

  mounted() {
    this.getIncome();
    this.gettype();
  },
  methods: {
    ...mapMutations(["SET_ISASSETS"]),

    formatDate(date) {
      let month =
        `${date.getMonth() + 1}` < 10
          ? 0 + `${date.getMonth() + 1}`
          : `${date.getMonth() + 1}`;
      let getdate =
        `${date.getDate()}` < 10
          ? 0 + `${date.getDate()}`
          : `${date.getDate()}`;
      return `${date.getFullYear()}-${month}-${getdate}`;
    },
    onTimeConfirm(date) {
      const [start, end] = date;
      this.time_show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
      this.startTime = `${this.formatDate(start)}`;
      this.endTime = `${this.formatDate(end)}`;
      this.getgo();
    },
    onConfirm(value, index) {
      this.type_show = false;
      if (index == 0) {
        this.type = [];
        this.typeTXT = this.$t("page.doc11");
        this.getgo();
        return;
      }
      this.type = [this.datatype[index - 1].code];
      this.typeTXT = this.datatype[index - 1].name;
      this.getgo();
    },
    onCancel() {
      this.type_show = false;
    },
    gettype() {
      this.$post(this.URL.user.wallet_type, {}).then((res) => {
        if (res.code == 0) {
          this.datatype = res.data;
          res.data.forEach((e) => {
            this.columns.push(e.name);
          });
        }
      });
    },

    getgo() {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0;
      this.totalPage = "";
      this.finished = false;
      this.loading = true;
      this.datalist = [];
      this.emptyShow = false;
      this.onLoad();
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 100);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }

      this.$post(this.URL.user.wallet_record, {
        types: this.type, //类型
        filter: "0", //筛选条件(0-全部, -1-支出, 1-收入)
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.pageSize,
        pageSize: 10,
        lastId: "",
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          if (res.data.list.length == 0) {
            this.emptyShow = true;
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        }
      });
    },

    getAssetShow() {
      this.is_static = !this.$store.state.is_assets;
      this.SET_ISASSETS(!this.$store.state.is_assets);
    },
    getIncome() {
      this.$post(this.URL.income.assets, {}).then((res) => {
        if (res.code == 0) {
          this.income_info = res.data;
          this.ktx =
            this.income_info.totalBalance - this.income_info.pendingAmount;
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.assets {
  padding: 0.36rem;
  text-align: center;
  font-size: 0.28rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--COcolor3);
  text-shadow: 0rem 0.1rem 0.2rem rgba(10, 10, 10, 0.1);
  background: var(--CObackgroundLinear1);
  border-radius: 0.2rem;
  margin-top: 0.22rem;
  .n {
    line-height: 0.4rem;
    margin-bottom: 0.44rem;
    color: var(--COcolor3);
  }
  .am {
    font-size: 0.72rem;
    color: var(--COcolor3);
    line-height: 0.73rem;
  }
}

.record_hdrecord_hd {
  margin-top: 0.36rem;
  .flex1 {
    font-size: 0.32rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.42rem;
    white-space: nowrap;
  }
  .set {
    background: url("../../assets/images/ico_la.png") no-repeat right center;
    background-size: 0.16rem auto;
    padding-right: 0.3rem;
    margin-left: 0.5rem;
    font-size: 0.24rem;
  }
}
.itemBox {
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  li {
    border-bottom: 0.02rem solid #47464a;
    padding: 0 0 0.2rem 0;
    margin-bottom: 0.2rem;
    &:last-child {
      margin-bottom: 0;
      border: 0;
      padding-bottom: 0;
    }
    .s {
      text-align: right;
    }
    .time,
    .status {
      font-size: 0.24rem;
      color: #ababb3;
    }
    .time,
    .status {
      margin-top: 0.14rem;
    }
  }
}
.footer_but {
  position: fixed;
  bottom: 0;
  left: auto;
  max-width: 10rem;
  width: 100%;
  background: #2b2b37;
  .fo {
    display: flex;
    .item {
      font-size: 0.32rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.28rem 0rem;
      img {
        height: 0.4rem;
        margin-right: 0.08rem;
      }
    }
    .item:first-child {
      border-right: 0.02rem solid #474652;
    }
  }
}
.list {
  li {
    padding: 0.3rem 0.32rem;
    background: var(--CObackgroundLinear2);
    margin-bottom: 0.24rem;
    border-radius: 0.2rem;
    font-size: 0.28rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--COcolor3);
    .s {
      font-size: 0.32rem;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: var(--COcolor2);
    }
    .reduce {
      font-size: 0.32rem;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: var(--COcolor3);
    }
    .time,
    .status {
      margin-top: 0.18rem;
      font-size: 0.24rem;
      color: var(--COcolor1);
    }
  }
}
.list_title {
  font-size: 0.32rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
}
</style>
